<template>
  <div class="login-container">
    <div class="background-image"></div>
    <h2>极溯</h2>
    <div class="login-box">
      <h2 class="section-title">用户登录</h2>
      <div class="login-form">
        <div class="form-group">
          <label>用户账号</label>
          <input 
            type="text" 
            v-model="userAccountNumber" 
            placeholder="请输入用户账号"
            class="form-input"
          >
        </div>
        <div class="form-group">
          <label>密码</label>
          <input 
            type="password" 
            v-model="password" 
            placeholder="请输入密码"
            class="form-input"
          >
        </div>
        <!-- <div class="form-group">
          <label>手机号</label>
          <input 
            type="tel" 
            v-model="phone" 
            placeholder="请输入11位手机号"
            maxlength="11"
            class="form-input"
          >
        </div> -->
        <button class="submit-btn" @click="handleLogin">登录</button>
        <button class="register-btn" @click="showRegister = !showRegister">注册</button>

      </div>
    </div>
    
    <div class="login-box centered" v-if="showRegister">
      <h2></h2>
      <h2 class="section-title">用户注册</h2>
      <div class="login-form">
        <div class="form-group">
          <label>注册账号</label>
          <input 
            type="text" 
            v-model="registerUserAccountNumber" 
            placeholder="请输入注册账号"
            class="form-input"
          >
        </div>
        <div class="form-group">
          <label>注册密码</label>
          <input 
            type="password" 
            v-model="registerPassword" 
            placeholder="请输入注册密码"
            class="form-input"
          >
        </div>
        <div class="form-group">
          <label>手机号</label>
          <input 
            type="tel" 
            v-model="phone" 
            placeholder="请输入11位手机号"
            maxlength="11"
            class="form-input"
          >
        </div>
        <button class="submit-btn" @click="handleRegister">提交注册</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import api from '@/api/index';

const router = useRouter();

const userAccountNumber = ref('');
const password = ref('');
const email = ref('');
const showRegister = ref(false);
const registerUserAccountNumber = ref('');
const registerPassword = ref('');
const phone = ref('');

const handleLogin = async () => {
  if (!userAccountNumber.value || !password.value) {
    alert('请输入账号和密码');
    return;
  }

  try {
    const response = await api.login(userAccountNumber.value, password.value);
    if (response.data.flag) {
      console.log(response.data.result);
      // 存储token
      localStorage.setItem('token', response.data.result.token.trim());
      // 存储用户信息，移除密码字段
      const userInfo = {...response.data.result.user};
      delete userInfo.userPassword;
      localStorage.setItem('userInfo', JSON.stringify(userInfo));
      alert('登录成功');
      router.push('/explore');
    } else {
      alert(response.data.reason || '登录失败');
    }
  } catch (error) {
    console.error('登录异常:', error);
    alert('登录异常，请稍后重试');
  }
};

const handleRegister = async () => {
  if (!registerUserAccountNumber.value || !registerPassword.value || !phone.value) {
    alert('请填写完整注册信息');
    return;
  }

  if (phone.value.length !== 11) {
    alert('请输入有效的手机号');
    return;
  }

  try {
    const userData = {
      userAccountNumber: registerUserAccountNumber.value,
      userPassword: registerPassword.value,
      phone: phone.value
    };

    const response = await api.register(userData);
    if (response.data.flag) {
      alert('注册成功，请登录');
      showRegister.value = false;
    } else {
      alert(response.data.reason || '注册失败');
    }
  } catch (error) {
    console.error('注册异常:', error);
    alert('注册异常，请稍后重试');
  }
};
</script>

<style scoped>
.login-container {
  position: relative;
  height: 80vh;
  max-width: 100vw;
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('src/images/demo1.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.login-box {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  max-width: 400px;
  width: 100%;
  background: rgba(20, 20, 20, 0.8);
  padding: 2.5rem;
  border-radius: 8px;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  color: #c0c0c0;
  font-weight: 250;
  letter-spacing: 0.05em;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-input {
  width: 85%;
  padding: 1rem;
  background: rgba(20, 20, 20, 0.8);
  border: 1px solid #333;
  border-radius: 4px;
  color: #fff;
  font-size: 1.1rem;
}

.submit-btn {
  width: 80%;
  margin-left: 10%;
  padding: 1rem;
  background: #ffffff;
  color: #000000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background 0.3s;
}

.submit-btn:hover {
  background: #ffffff;
}

.register-form-container {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translateX(-50%);
  max-width: 400px;
  width: 100%;
  background: rgba(20, 20, 20, 0.8);
  padding: 2rem;
  border-radius: 8px;
}

.register-form {
  margin-top: 1rem;
}

.register-btn {
  width: 60%;
  margin-left: 20%;
  padding: 1rem;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.3s;
  margin-top: 1rem;
}

.register-btn:hover {
  background: rgba(0, 102, 204, 0.1);


.login-form {
  max-width: 500px;
  padding: 3rem;
}

.form-input {
  padding: 1rem;
  font-size: 1.1rem;
}

}

.login-box.centered {
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>


